<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links
		<!-- <button v-on:click="getdatabyres">resource测试</button> -->
		<button v-on:click="getdatabyaxios()">axios测试</button></h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorldTest',
  data () {
    return {
      msg: '欢迎你来到 vue 应用'
    }
  },
	methods: {
//         getdatabyres: function() {
//             //发送get请求
//         this.$http.get('http://www.test.com/test.php').then(function(res){
//             this.msg = res.body;
//         },function(){
//             console.log('请求失败处理');
//             });
//         },
				getdatabyaxios: function() {
				    //发送post请求
						this.axios.post('http://www.test.com/test.php',this.qs.stringify({'name':'xiaoming','sex':'nan'}),{
							headers: {
								'Content-Type': 'application/x-www-form-urlencoded'
							}
						})
          .then(function(res){
            console.log(res.data)
						this.msg = res.data;
                  //控制台打印请求成功时返回的数据
               //bind(this)可以不用
          }.bind(this))
          .catch(function(err){
            if(err.response) {
              console.log(err.response)
                //控制台打印错误返回的内容
            }
                //bind(this)可以不用
          }.bind(this))
	},
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>